<template>
  <MarkDown v-bind="bindProps" @change="onChange" @get="onGetVditor"/>
</template>

<script lang="ts">
import { computed, defineComponent, watch } from 'vue'
import { MarkDown } from '/@/components/Markdown'
import { propTypes } from '/@/utils/propTypes'

export default defineComponent({
  name: 'JMarkdownEditor',
  // 不将 attrs 的属性绑定到 html 标签上
  inheritAttrs: false,
  components: { MarkDown },
  props: {
    value: propTypes.string.def(''),
    disabled: propTypes.bool.def(false),
  },
  emits: ['change', 'update:value'],
  setup(props, { emit, attrs }) {
    // markdown 组件实例
    let mdRef: any = null
    // vditor 组件实例
    let vditorRef: any = null
    // 合并 props 和 attrs
    const bindProps = computed(() => Object.assign({}, props, attrs))

    // 相当于 onMounted
    function onGetVditor(instance) {
      mdRef = instance
      vditorRef = mdRef.getVditor()

      // 监听禁用，切换编辑器禁用状态
      watch(() => props.disabled, disabled => disabled ? vditorRef.disabled() : vditorRef.enable(), { immediate: true })
    }

    // value change 事件
    function onChange(value) {
      emit('change', value)
      emit('update:value', value)
    }

    return {
      bindProps,

      onChange,
      onGetVditor,
    }
  },
})
</script>

<style lang="less" scoped>
</style>